<template>
    <template v-if="showContent && modelValue">
        <div v-bind="$attrs" style="width:100%;min-height: 30px;" v-if="typeOf=='text'" @click="handleEdit" >{{ modelValue }}</div>
        <image-uploader @click="handleEdit" v-if="typeOf=='image'" :modelValue="modelValue" disabled /> 
    </template>
    <el-icon v-bind="$attrs" v-else  @click="handleEdit" :size="size" :color="modelValue?'#409EFF':'#E6E8EB'">
        <Picture v-if="typeOf=='image'" />
        <Document v-if="typeOf=='text'" />
    </el-icon>
</template>

<script setup>

    const props = defineProps({
        modelValue: String,
        disabled: Boolean,
        title: String,
        required: Boolean,
        size: {
            type: Number,
            default: 20
        },
        typeOf: String,//text/image
        showContent:Boolean,
        ossServer:Boolean,
        extData:Object,
        allowVideo:Boolean,
    })
    const emits = defineEmits(["update:modelValue","change"]);

    const handleEdit = function () {
        let cfg = {
            modelValue: props.modelValue,
            title: props.title,
            typeOf: props.typeOf,
            required: props.required,
            disabled: props.disabled,
            ossServer: props.ossServer,
            extData: props.extData,
            allowVideo: props.allowVideo,
            "onUpdate:modelValue": (val) => {
                emits("update:modelValue", val);
                emits("change", val);
            }
        }
        $server.dlg.open("TextOrImgEditDlg", cfg);
    }
    
</script>